/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../internal/styles/index' as styles;
@use '../../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

//stylelint-disable-next-line selector-combinator-disallowed-list,selector-max-universal
.resize-active:not(.resize-active-with-focus) * {
  cursor: col-resize;
  user-select: none;
}

$handle-width: awsui.$space-xl;
$active-separator-width: 2px;
$block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});

.resizer-wrapper {
  inset-block: 0;
  position: absolute;
  inset-inline-end: calc(-1 * #{$handle-width} / 2);
  inline-size: $handle-width;
  overflow: hidden;
  z-index: 10;

  th:last-child > &:has(.divider-interactive):not(.is-visual-refresh) {
    inset-inline-end: 0;
  }
}

.resizer-button-wrapper {
  block-size: 100%;
}

th:not(:last-child) > .divider,
.divider-interactive {
  position: absolute;
  outline: none;
  pointer-events: none;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-block-start: 0;
  min-block-size: awsui.$line-height-heading-xs;
  max-block-size: calc(100% - #{$block-gap});
  margin-block: auto;
  margin-inline: auto;
  border-inline-start: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
  box-sizing: border-box;
}

th:not(:last-child) > .divider-disabled {
  border-inline-start-color: awsui.$color-border-divider-default;
}

.divider-interactive {
  inset-inline-end: calc(#{$handle-width} / 2);
}

.divider-active {
  border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
}

.resizer {
  @include styles.styles-reset;
  border-block: none;
  border-inline: none;
  background: none;
  inset-block: 0;
  cursor: col-resize;
  block-size: 100%;
  inline-size: $handle-width;
  &:focus {
    outline: none;
    text-decoration: none;
  }
  //stylelint-disable-next-line selector-combinator-disallowed-list
  .resize-active & {
    pointer-events: none;
  }
  &:hover + .divider {
    border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
  }
  &.has-focus {
    @include focus-visible.when-visible-unfocused {
      @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
    }
  }
}

th:last-child > .resizer:not(.is-visual-refresh) {
  inset-inline-end: 0;
}

.tracker {
  display: none;
  position: absolute;
  border-inline-start: awsui.$border-divider-list-width dashed awsui.$color-border-divider-active;
  inline-size: 0;
  inset-block: 0;
  //stylelint-disable-next-line selector-combinator-disallowed-list
  .resize-active & {
    display: block;
  }
}
